/**
 * 新建测试用例页面JavaScript
 * 
 * 本文件提供了新建测试用例页面的完整交互功能，包括表单验证、
 * 数据提交、用户反馈和键盘快捷键等核心功能。
 * 
 * 主要功能：
 * - 表单验证：实时验证必填字段和JSON格式
 * - 数据提交：创建问题和测试用例的完整流程
 * - 用户反馈：成功/错误消息的优雅显示
 * - 键盘快捷键：提高用户操作效率
 * - 数据验证：JSON格式验证和字段验证
 * - 用户体验：加载状态、确认对话框、动画效果
 * 
 * 技术特点：
 * - 实时表单验证：输入时即时反馈
 * - JSON格式验证：确保数据格式正确
 * - 异步数据提交：使用fetch API
 * - 键盘快捷键：Ctrl+S保存，Escape返回
 * - 动画效果：消息提示的滑入滑出动画
 * - 错误处理：完善的异常处理和用户提示
 * - 加载状态：提交时的视觉反馈
 * 
 * 页面结构：
 * - 问题信息表单：问题描述、输入输出格式
 * - 测试用例表单：标题、描述、类型、数据
 * - 验证提示：实时错误和成功提示
 * - 操作按钮：保存、返回等
 * 
 * API接口：
 * - POST /api/save-problem-and-test-case：保存问题和测试用例
 * 
 * 使用场景：
 * - 教师创建新的测试用例
 * - 手动输入测试数据
 * - 验证测试用例格式
 * - 批量创建测试用例
 * 
 * 依赖关系：
 * - HTML：new_test_case.html页面结构
 * - CSS：new_test_case.css样式文件
 * - API：后端RESTful接口
 * - Font Awesome：图标库
 */

// ==================== 页面初始化 ====================

/**
 * 页面加载完成后初始化
 * 
 * DOMContentLoaded事件处理器，负责页面的初始化工作。
 * 按顺序初始化各个功能模块，确保页面功能完整可用。
 * 
 * 初始化流程:
 * 1. 初始化表单验证和事件监听
 * 2. 初始化JSON格式验证
 * 3. 初始化键盘快捷键
 * 
 * 功能模块:
 * - 表单验证：实时验证必填字段
 * - JSON验证：验证输入数据和期望输出的JSON格式
 * - 键盘快捷键：提供便捷的操作方式
 */
document.addEventListener('DOMContentLoaded', function() {
    initializeForm();
    initializeJSONValidation();
    initializeKeyboardShortcuts();
});

// ==================== 表单初始化 ====================

/**
 * 初始化表单
 * 
 * 设置表单的事件监听器和验证规则。
 * 包括表单提交处理和实时字段验证。
 * 
 * 功能特点:
 * - 表单提交拦截和验证
 * - 实时字段验证
 * - 错误状态清除
 * - 必填字段检查
 */
function initializeForm() {
    const form = document.getElementById('newTestCaseForm');
    if (!form) return;
    
    // 添加表单提交事件监听
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        saveTestCase();
    });
    
    // 为所有必填字段添加实时验证
    const requiredFields = form.querySelectorAll('[required]');
    requiredFields.forEach(field => {
        field.addEventListener('blur', validateField);      // 失去焦点时验证
        field.addEventListener('input', clearFieldError);   // 输入时清除错误状态
    });
}

/**
 * 初始化JSON验证
 * 
 * 为JSON格式的输入字段添加实时验证功能。
 * 确保用户输入的JSON数据格式正确。
 * 
 * 验证字段:
 * - inputData: 输入数据字段
 * - expectedOutput: 期望输出字段
 * 
 * 验证特点:
 * - 实时验证：输入时即时检查
 * - 视觉反馈：有效/无效状态显示
 * - 错误提示：详细的错误信息
 */
function initializeJSONValidation() {
    const inputDataField = document.getElementById('inputData');
    const expectedOutputField = document.getElementById('expectedOutput');
    
    if (inputDataField) {
        inputDataField.addEventListener('input', () => {
            validateJSONInput(inputDataField, document.getElementById('inputDataError'));
        });
    }
    
    if (expectedOutputField) {
        expectedOutputField.addEventListener('input', () => {
            validateJSONInput(expectedOutputField, document.getElementById('expectedOutputError'));
        });
    }
}

/**
 * 初始化键盘快捷键
 * 
 * 为页面添加键盘快捷键支持，提高用户操作效率。
 * 支持常用的操作快捷键。
 * 
 * 快捷键列表:
 * - Ctrl + S: 保存测试用例
 * - Escape: 返回管理页面
 * 
 * 功能特点:
 * - 防止默认行为
 * - 提供便捷操作
 * - 提高用户体验
 */
function initializeKeyboardShortcuts() {
    document.addEventListener('keydown', function(e) {
        // Ctrl + S 保存测试用例
        if (e.ctrlKey && e.key === 's') {
            e.preventDefault();
            saveTestCase();
        }
        
        // Escape 返回管理页面
        if (e.key === 'Escape') {
            goBack();
        }
    });
}

// ==================== 表单验证 ====================

/**
 * 实时JSON验证
 * 
 * 验证JSON格式的输入字段，提供实时的格式检查和视觉反馈。
 * 确保用户输入的JSON数据格式正确，避免提交时的错误。
 * 
 * @param {HTMLElement} inputElement - 输入字段元素
 * @param {HTMLElement} errorElement - 错误提示元素
 * @returns {boolean} 验证是否通过
 * 
 * 验证逻辑:
 * - 空值检查：空值视为有效
 * - JSON解析：尝试解析JSON格式
 * - 状态更新：更新字段的视觉状态
 * - 错误提示：显示具体的错误信息
 * 
 * 视觉反馈:
 * - 有效状态：绿色边框，清除错误提示
 * - 无效状态：红色边框，显示错误信息
 */
function validateJSONInput(inputElement, errorElement) {
    const value = inputElement.value.trim();
    if (!value) {
        errorElement.textContent = '';
        inputElement.classList.remove('is-invalid', 'is-valid');
        return true;
    }
    
    try {
        JSON.parse(value);
        errorElement.textContent = '';
        inputElement.classList.remove('is-invalid');
        inputElement.classList.add('is-valid');
        return true;
    } catch (e) {
        errorElement.textContent = 'JSON格式错误: ' + e.message;
        inputElement.classList.remove('is-valid');
        inputElement.classList.add('is-invalid');
        return false;
    }
}

/**
 * 验证单个字段
 * 
 * 验证表单字段的基本规则，包括必填字段检查。
 * 在字段失去焦点时触发验证。
 * 
 * @param {Event} e - 事件对象
 * @returns {boolean} 验证是否通过
 * 
 * 验证规则:
 * - 必填字段：检查是否有值
 * - 空值处理：必填字段不能为空
 * - 错误显示：显示相应的错误信息
 * - 状态清除：验证通过时清除错误状态
 */
function validateField(e) {
    const field = e.target;
    const value = field.value.trim();
    
    if (field.hasAttribute('required') && !value) {
        showFieldError(field, '此字段为必填项');
        return false;
    }
    
    clearFieldError(field);
    return true;
}

/**
 * 显示字段错误
 * 
 * 在字段下方显示错误信息，提供视觉反馈。
 * 使用Bootstrap的验证样式，确保错误信息清晰可见。
 * 
 * @param {HTMLElement} field - 字段元素
 * @param {string} message - 错误信息
 * 
 * 功能特点:
 * - 移除现有错误：避免重复显示
 * - 添加错误样式：红色边框和背景
 * - 创建错误元素：动态生成错误提示
 * - 插入DOM：将错误信息添加到字段下方
 */
function showFieldError(field, message) {
    field.classList.add('is-invalid');
    field.classList.remove('is-valid');
    
    // 移除现有错误消息
    const existingError = field.parentNode.querySelector('.field-error');
    if (existingError) {
        existingError.remove();
    }
    
    // 添加新错误消息
    const errorDiv = document.createElement('div');
    errorDiv.className = 'invalid-feedback field-error';
    errorDiv.textContent = message;
    field.parentNode.appendChild(errorDiv);
}

/**
 * 清除字段错误
 * 
 * 清除字段的错误状态和错误信息。
 * 在用户开始输入时自动清除错误状态。
 * 
 * @param {HTMLElement} field - 字段元素
 * 
 * 清除内容:
 * - 错误样式：移除is-invalid类
 * - 错误信息：移除错误提示元素
 * - 视觉状态：恢复字段的正常外观
 */
function clearFieldError(field) {
    field.classList.remove('is-invalid');
    const errorDiv = field.parentNode.querySelector('.field-error');
    if (errorDiv) {
        errorDiv.remove();
    }
}

// ==================== 数据提交 ====================

/**
 * 保存测试用例
 * 
 * 处理测试用例的完整保存流程，包括数据验证、格式转换和API调用。
 * 同时创建问题和测试用例，建立它们之间的关联关系。
 * 
 * 保存流程:
 * 1. 获取表单数据
 * 2. 验证必填字段
 * 3. 验证JSON格式
 * 4. 处理标签数据
 * 5. 创建问题对象
 * 6. 创建测试用例对象
 * 7. 显示加载状态
 * 8. 调用API保存
 * 9. 处理响应结果
 * 
 * 数据验证:
 * - 必填字段检查
 * - JSON格式验证
 * - 数据类型转换
 * 
 * 用户体验:
 * - 加载状态显示
 * - 成功/错误反馈
 * - 自动页面跳转
 */
async function saveTestCase() {
    const form = document.getElementById('newTestCaseForm');
    const formData = new FormData(form);
    
    // 验证必填字段
    const problemDescription = formData.get('problem_description');
    const title = formData.get('title');
    const problemType = formData.get('problem_type');
    const testType = formData.get('test_type');
    const inputData = formData.get('input_data');
    const expectedOutput = formData.get('expected_output');
    
    if (!problemDescription || !title || !problemType || !testType || !inputData || !expectedOutput) {
        showError('请填写所有必填字段');
        return;
    }
    
    // 验证JSON格式
    let parsedInputData, parsedExpectedOutput;
    try {
        parsedInputData = JSON.parse(inputData);
        parsedExpectedOutput = JSON.parse(expectedOutput);
    } catch (e) {
        showError('输入数据或期望输出格式不正确，请使用有效的JSON格式');
        return;
    }
    
    // 处理标签数据
    const tags = formData.get('tags') ? formData.get('tags').split(',').map(tag => tag.trim()).filter(tag => tag) : [];
    
    // 创建问题对象
    const problem = {
        description: problemDescription,
        input_format: formData.get('input_format') || null,
        output_format: formData.get('output_format') || null
    };
    
    // 创建测试用例对象
    const testCase = {
        title: title,
        description: formData.get('description') || '',
        problem_type: problemType,
        input_data: parsedInputData,
        expected_output: parsedExpectedOutput,
        test_type: testType,
        created_by: 'teacher',
        tags: tags,
        difficulty: formData.get('difficulty') || 'medium'
    };
    
    // 显示加载状态
    const saveBtn = document.querySelector('.btn-primary');
    const originalText = saveBtn.innerHTML;
    saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>保存中...';
    saveBtn.disabled = true;
    saveBtn.classList.add('loading');
    
    try {
        // 调用API保存问题和测试用例
        const response = await fetch('/api/save-problem-and-test-case', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                problem: problem,
                test_case: testCase
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            showSuccess('问题和测试用例创建成功！');
            setTimeout(() => {
                window.location.href = '/teacher';
            }, 1500);
        } else {
            showError('创建失败: ' + data.error);
        }
    } catch (error) {
        showError('请求失败: ' + error.message);
    } finally {
        // 恢复按钮状态
        saveBtn.innerHTML = originalText;
        saveBtn.disabled = false;
        saveBtn.classList.remove('loading');
    }
}

/**
 * 返回管理页面
 * 
 * 处理用户返回操作，包含确认对话框以防止数据丢失。
 * 在用户确认后跳转到教师管理页面。
 * 
 * 功能特点:
 * - 确认对话框：防止意外离开
 * - 数据保护：提醒用户未保存的数据
 * - 页面跳转：返回管理页面
 */
function goBack() {
    if (confirm('确定要离开吗？未保存的数据将丢失。')) {
        window.location.href = '/teacher';
    }
}

// ==================== 消息显示 ====================

/**
 * 显示成功消息
 * 
 * 显示操作成功的提示消息。
 * 使用统一的成功消息样式和动画效果。
 * 
 * @param {string} message - 成功消息内容
 */
function showSuccess(message) {
    showMessage(message, 'success');
}

/**
 * 显示错误消息
 * 
 * 显示操作失败的提示消息。
 * 使用统一的错误消息样式和动画效果。
 * 
 * @param {string} message - 错误消息内容
 */
function showError(message) {
    showMessage(message, 'error');
}

/**
 * 显示消息
 * 
 * 通用的消息显示函数，支持成功和错误两种类型的消息。
 * 提供优雅的动画效果和自动消失功能。
 * 
 * @param {string} message - 消息内容
 * @param {string} type - 消息类型（'success' 或 'error'）
 * 
 * 功能特点:
 * - 移除现有消息：避免消息堆积
 * - 动态创建元素：生成消息DOM结构
 * - 样式设置：根据类型设置不同的颜色和图标
 * - 动画效果：滑入滑出动画
 * - 自动消失：3秒后自动移除
 * 
 * 视觉设计:
 * - 固定位置：右上角显示
 * - 渐变背景：成功绿色，错误红色
 * - 图标支持：成功✓，错误⚠
 * - 阴影效果：增强视觉层次
 * - 响应式：最大宽度限制
 */
function showMessage(message, type) {
    // 移除现有消息
    const existingMessage = document.querySelector('.message-toast');
    if (existingMessage) {
        existingMessage.remove();
    }
    
    // 创建消息元素
    const messageDiv = document.createElement('div');
    messageDiv.className = `message-toast message-${type}`;
    messageDiv.innerHTML = `
        <div class="message-content">
            <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'} me-2"></i>
            ${message}
        </div>
    `;
    
    // 添加样式
    messageDiv.style.cssText = `
        position: fixed;
        top: 100px;
        right: 20px;
        z-index: 9999;
        padding: 1rem 1.5rem;
        border-radius: 0.5rem;
        color: white;
        font-weight: 500;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        animation: slideInRight 0.3s ease;
        max-width: 400px;
    `;
    
    // 根据类型设置背景颜色
    if (type === 'success') {
        messageDiv.style.background = 'linear-gradient(135deg, #10b981, #059669)';
    } else {
        messageDiv.style.background = 'linear-gradient(135deg, #ef4444, #dc2626)';
    }
    
    // 添加到页面
    document.body.appendChild(messageDiv);
    
    // 自动移除
    setTimeout(() => {
        messageDiv.style.animation = 'slideOutRight 0.3s ease';
        setTimeout(() => {
            if (messageDiv.parentNode) {
                messageDiv.parentNode.removeChild(messageDiv);
            }
        }, 300);
    }, 3000);
}

// ==================== 样式和动画 ====================

/**
 * 添加动画样式
 * 
 * 动态创建CSS样式，为消息提示添加滑入滑出动画效果。
 * 使用CSS3动画提供流畅的用户体验。
 * 
 * 动画特点:
 * - slideInRight: 从右侧滑入动画
 * - slideOutRight: 向右侧滑出动画
 * - 平滑过渡: 0.3秒缓动效果
 * - 透明度变化: 配合位移效果
 * 
 * 技术实现:
 * - 动态创建style元素
 * - 使用CSS3 @keyframes
 * - transform和opacity属性
 * - ease缓动函数
 */
const style = document.createElement('style');
style.textContent = `
    @keyframes slideInRight {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes slideOutRight {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(100%);
            opacity: 0;
        }
    }
`;
document.head.appendChild(style);
